<template>
  <div>
    <div  style="width: 100%;height: 50vh;display: flex;align-items: center;justify-content: center" v-show="isLoading">
      <van-loading size="24px" type="spinner" color="#1989fa">加载中...</van-loading>
    </div>
    <van-empty
      style="width: 100%;height: 60%"
      v-show="yewuList.length <= 0 && isLoading === false"
      class="custom-image"
      :image="require('../../../assets/空两本书.png')"
      description="暂无我的授权"
    />
    <div class="box"
         @click.stop="run(item)"
         v-for="(item, index) in yewuList" :key="index">
      <div class="top">
        <div class="box_left">
          <img v-if="item.doctorPhoto" :src="item.doctorPhoto" class="PHOTO" alt="">
          <img  v-else-if="Number(item.SEX) == 1" src="../../../assets/男医生@2x.png" class="PHOTO" alt="">
          <img  v-else-if="Number( item.SEX )== 2" src="../../../assets/女医生@2x.png" class="PHOTO" alt="">
        </div>
        <div class="box_right">
          <ul>
            <li>
            <span class="name">
              <span style="font-weight: bold;font-size: 15px">{{item.NICK_NAME}}</span>
            </span>
            </li>
            <li>
              <span style="font-weight: 500;font-size: 13px !important;">{{item.MAJOR}}</span>
              <span>&nbsp;|&nbsp;</span>
              <span style="font-weight: 500;font-size: 13px !important;">{{item.DEPART}}</span>
            </li>
            <li>
              <span class="jieShao">{{item.HOSPITAL_NAME}}</span>
              <button class="biaoqian">{{item.GRADE}}</button>
            </li>
          </ul>
        </div>
      </div>
      <div class="bottom">
        <p>申请时间：{{item.created_at}}</p>
        <p>服务项目：{{typeText(item.type)}}
          {{item.doc_amount_name}}
        </p>
      </div>
    </div>
  </div>
</template>

<script>
import Http from '../../../http/video.http'
export default {
  name: 'YewuEmpowerList',
  computed: {
    typeText () {
      return function (type) {
        let text = ''
        Http.typeList.forEach((curr) => {
          if (type == curr.type) {
            text = curr.name
            return false
          }
        })
        return text
      }
    }
  },
  data () {
    return {
      user_id: this.$route.query.user_id, // 授权的用户的userid
      patient_user_id: this.$route.query.patient_user_id,
      yewuList: [],
      isLoading: true
    }
  },
  mounted () {
    this.getYewu()
  },
  methods: {
    run (item) {
      this.$router.push({path: '/fileInformationList',
        query: {
          doc_user_id: item.doc_user_id,
          userid: this.userid,
          data_user_id: item.patient_user_id,
          inquiry_id: item.id
        }})
    },
    // 获取授权的业务列表
    getYewu () {
      this.isLoading = true
      this.$http.findAllInquiry({
        is_ongoing: '1',
        patient_user_id: this.patient_user_id
      })
        .then(res => {
          console.log(res)
          if (res.data.status === 'success') {
            this.yewuList = res.data.data
            this.isLoading = false
          } else {
            this.$toast(res.data.msg)
          }
        })
        .catch(err => {
          console.log(err)
          this.$toast('您的网络有些拥挤，请稍后再试')
        })
    }
  }
}
</script>

<style scoped>
.box{
  background: #FFFFFF;
  width: 95%;
  margin: 8px auto;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
}
.top{
  display: flex;
  border-bottom: 1px solid #E5E5E5;
  padding: 10px 0;
  box-sizing: border-box;
}
.bottom{
  padding: 10px;
  box-sizing: border-box;
  font-size: 13px;
}
.bottom p{
  height: 25px;
  display: flex;
  align-items: center;
}
.box_left{
  width: 23%;
  display: flex;
  align-items: center;
  flex-direction: column;
  /*justify-content: space-between;*/
}
.box_right{
  width: 78%;
}
.box_right ul{
  /*height: 60px;*/
  display: flex;
  flex-direction: column;
  align-content: space-around;
  justify-content: space-around;
}
.box_right ul li{
  height: 25px;
  display: flex;
  align-items: center;
}
.box_right ul li:nth-child(1){
  justify-content: space-between;
}
.name{
  font-size: 15px;
  font-family: PingFang SC;
  color: #333333;
}
.biaoqian{
  /*padding: 0px 8px;*/
  min-width: 44px;
  height: 18px;
  border-radius: 15px;
  -webkit-box-sizing: border-box;
  box-sizing: border-box;
  /* background: rgba(29, 164, 242, 0.1); */
  background: transparent;
  color: #1DA4F2;
  /* border: none; */
  border: 1px solid;
  font-size: 11px;
  margin-left: 8px;
}
/*{*/
/*  color: white;*/
/*  background: #1DA4F2;*/
/*  border: none;*/
/*  padding: 5px 15px;*/
/*  border-radius: 5px;*/
/*  box-sizing: border-box;*/
/*  font-size: 11px;*/
/*}*/
.biaoqian,
.jieShao
{
  display: flex;
  align-items: center;
  justify-content: center;
}
.jieShao{
  font-size: 13px;
  font-family: PingFang SC;
  font-weight: 500;
  color: #333333;
  margin-right: 8px;
}
.selectImg{
  width: 11px;
  height: 7px;
}
.PHOTO{
  width: 55px;
  height: 55px;
  border-radius: 50%;
}
</style>
